<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE学习 - 2.3 循环渲染</title>
</head>

<body>


    <!--载入vue.js-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="Application">
        <div v-for="item in list">
            {{item}}
        </div>

        <ul>
            <li v-for="item in list_n">
                <div>{{item.name}}</div>
                <div>{{item.num}}</div>
            </li>
        </ul>

        <!--遍历-->
        <h1>记号</h1>
        <ul>
            <li v-for="(nbv,index) in list_n">
                <div>{{index+ "." + nbv.name}}</div>
                <div>{{nbv.num}}</div>
            </li>
        </ul>


        <ol>
            <li v-for="(value,key,index) in person" :key="poss">
                {{value}}--遍历--{{key}}
            </li>

        </ol>

        <h1>高级指令用法</h1>
        <button @click="click">逆序</button>
        <h1>五</h1>


        <template v-for="(item,indx) in handle(list_n)">
            <div>{{indx+"."+item.name}}</div>
            <div>{{item.num}}</div>
        </template>


    </div>



    <script>
        const App = {
            data() {
                return {
                    list: [1, 2, 3, 4, 5],
                    list_n: [
                        {
                            name: "辉少",
                            num: "asdfsadf",
                        },
                        {
                            name: "Jack",
                            num: "5234234",
                        },
                        {
                            name: "Tim",
                            num: "41234",
                        },
                        {
                            name: "Lucy",
                            num: "241234",
                        },
                        {
                            name: "Baobo",
                            num: "234234",
                        },

                    ],
                    person: {
                        name: "辉夜姬",
                        age: "18",
                        num: "1244654684",
                        email: "65486@sd.com",
                    },

                }
            },

            methods: {
                click() {
                    this.person.reverse()
                },

                handle(l) {
                    return l.filter(obj => obj.name != "辉少")
                }
            }

        }

        Vue.createApp(App).mount("#Application")
    </script>

    <style>

    </style>


</body>

</html>